<template>
    <div 
    class="btn-load"
    :class="size"
    v-if="remain > 0"
    >
        <div class="text">
            剩余{{remain}}条未读，
            <span 
            class="btn" 
            @click="clickHandler"
            >
                继续阅读
                <i class="el-icon-arrow-down"></i>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        remain: {
            type: Number,
            default: 0,
        },
        size: {
            type: String,
            default: 'normal'
        }
    },
    methods: {
        clickHandler() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .btn-load{
        text-align: center;
        line-height: 1em;
        width: 100%;
        
        &.small {
            color: #666;
            font-size: 12px;
            padding: 0 0 1em;
        }

        .text {
            .btn{
                color: $primaryColor;
                cursor: pointer;
            }
        }
    }
</style>